<template>
	<view class="bg min100 container" style="padding-bottom: 200rpx;">
		<!-- <view class="size-40 gray mb-30">
			第一次支付平台手续费
		</view>
		<view class="gray-2 size-22 mb-40">
			<view class="mb-20">
				钱包VIP：在您支付{{price}}元后，您将会得到永久使用钱包的权利。权利包括：收款、充值、提现、支付。
			</view>
		</view>
		
		<u-button type="primary" class="mt-60" hover-class="none" @click="commit">提交</u-button> -->
		<view class="primaryBg">
			<view class="priceBox flex flex-center">
				<view class="price">{{price}}</view>
				<view class="ml-10">元</view>
			</view>
			<view class="timeLimit">有限期：永久</view>
			<view class="tips">开通一次即可永久生效</view>
		</view>
		<view class="rightsBox">
			<view class="rightsTitle flex flex-start">
				<image src="../../static/my/rights.png" mode="widthFix"></image>
				<view class="ml-20 size-32">会员权益</view>
			</view>
			<view class="rightsCont mt-40">
				<view class="rightItem" v-for="item in rightList">
					<image :src="item.src" mode="widthFix"></image>
					<view class="size-26">{{item.val}}</view>
				</view>
			</view>
		</view>
		<view class="rule">
			<view class="rightsTitle flex flex-start">
				<image src="../../static/my/rights.png" mode="widthFix"></image>
				<view class="ml-20 size-32">收费规则</view>
			</view>
			<view class="ruleCont">
				<view class="mt-40">关于PLUS会员</view>
				<view class="mt-20">1.账户开通PLUS会员，享受永久会员权益。</view>
				<view class="mt-20">2.收费标准：{{price}}元/永久</view>
				<view class="mt-20">3.收费方式：银行卡/余额</view>
				<view class="mt-20">注意：如注销账户，则失去会员权益。</view>
			</view>
			
		</view>
		<view class="submitBtn" @click="commit">
			立即开通
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {},
				price:'',
				rightList:[
					{src:'../../static/my/right1.png',val:'普通绑卡'},
					{src:'../../static/my/right2.png',val:'钱包收款'},
					{src:'../../static/my/right3.png',val:'钱包充值'},
					{src:'../../static/my/right4.png',val:'余额支付'},
					{src:'../../static/my/right5.png',val:'优惠提现'},
					{src:'../../static/my/right6.png',val:'快速到账'},
					{src:'../../static/my/right7.png',val:'一键绑卡'},
				]
			}
		},
		onShow() {
			this.init();
		},
		methods: {
			init() {
				this.$http('api/user/userInfo').then(res => {
					this.info = res;
				})
				this.$http('api/first_pay/fee', {
					id: this.id
				}).then(res => {
					console.log(res.fee)
					this.price = res.fee;
					
				});
			},
			
			commit() {
				// console.log('44')
				this.$http('api/user/isTradePass', {}).then(res => {
					if (res.is_trade == 0) { //判断是否设置过密码
						// console.log('去设置密码')
						uni.showModal({
							title: '提示',
							content: '还未设置密码，去设置密码',
							success: function(res) {
								if (res.confirm) {
									uni.navigateTo({
										url: '../my/changePwd'
									});
									
								} else if (res.cancel) {}
							}
						});
					} else if (res.is_trade == 1) {
						
						this.$http('api/user/userInfo').then(res => {
							if(res.is_heepay_auth == 0){
								uni.showToast({
									icon:"none",
									title:'请先开通钱包'
								})
							}else{
								uni.navigateTo({
									url: '../pay/premiumPay'
								})
								
							}
							
						});
						
						
					}
				})
				
			}
		}
	}
</script>

<style lang="less" scoped>
	.container{
		width: 100%;
		.primaryBg{
			width: 100%;
			background: url(../../static/my/primaryBg.png) no-repeat;
			background-size: 100% 100%;
			height: 228px;
			position: relative;
			.priceBox{
				position: absolute;
				top: 32%;
				align-items: baseline;
				width: 100%;
				text-align: center;
				color: #795C46;
				.price{
					font-size: 80rpx;
				}
			}
			.timeLimit{
				position: absolute;
				top: 60%;
				width: 100%;
				text-align: center;
				font-size: 26rpx;
				color: #795C46;
			}
			.tips{
				position: absolute;
				bottom: 6%;
				width: 100%;
				text-align: center;
				font-size: 26rpx;
				color: rgba(255,255,255,0.6);
			}
		}
		
		.rightsBox,.rule{
			// border: 1rpx solid #E4CFA6;
			width: 94%;
			// height: 450rpx;
			// border-radius: 20rpx;
			margin: 40rpx auto;
			padding: 30rpx;
			.rightsTitle{
				image{
					width: 20rpx;
				}
			}
			.rightsCont{
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				.rightItem{
					width: 25%;
					text-align: center;
					margin-bottom: 40rpx;
					image{
						width: 70rpx;
					}
				}
			}
		}
		.rightsBox{
			border: 1rpx solid #E4CFA6;
			height: 420rpx;
			border-radius: 20rpx;
		}
		.submitBtn{
			position: fixed;
			bottom: 20rpx;
			width: 96%;
			height: 120rpx;
			line-height: 100rpx;
			text-align: center;
			color: #F5E7BC;
			background: url(../../static/my/submit.png) no-repeat;
			background-size: 100%  100%;
		}
	}
	page{
		background-color: #F5F5F5;
	}
	::v-deep  .u-field {
		color: #333 !important;
		font-size: 26rpx;
	}
	
	::v-deep  .u-btn--primary--disabled {
		background: #DEE4E8 !important;
	}
</style>
